//  Object.defineProperty()  拦截器
let obj = {}
// 默认不可枚举
Object.defineProperty(obj, 'name', {
  enumerable: true, // 可枚举 配置
  configurable: true, // 能不能删除
  writable: true, // 是否可以重写
  value: 'hhh',
  // set get 就不能 设置 writable  value
})


let obj2 = {
  other: '',
  get name() {
    return this.other
  },
  set name(val) {
    this.other = val
  }
}

// vue 简单原理
// // 数组方法设置拦截  等等
let oldMethods = Array.prototype
let arrPro = Object.create(oldMethods)

let methods = ['push', 'slice', 'pop', 'sort']
methods.forEach(item => {
  arrPro[item] = function() {
    console.log('来了哦')
    update()
    return oldMethods[item].call(this, ...arguments)
  }
})

let data = {
  name: 'kk',
  age: 18,
  obj: {
    add: '111'
  },
  arr:  [1,23,5]
}

function update() {
  console.log('试图更新')
}

function observe(data) {
  if(typeof data !== 'object') return data
  // console.log(Object.prototype.toString.call([1233]))
  if(Object.prototype.toString.call(data) === '[object Array]') data.__proto__ = arrPro
  for(let key in data) {
    defineReactive(data, key, data[key])
  }
}
function defineReactive(data, key, value) {
  if(typeof value === 'object') observe(value)
  Object.defineProperty(data, key, {
    get() {
      return value
    },
    set(newVal) {
      // 这边如果是设置 新的值 还要设置 拦截
      observe(newVal)
      update()
      value = newVal
    }
  })
}

observe(data)
data.arr.push('ff')

